<template>
  <div class="records_container">
    <div>
      <van-nav-bar :fixed="true" title="Records" @click-left="onClickLeft">
        <template #left>
          <van-icon :name="arrow" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <van-tabs v-model:active="activeName" v-model="active" @click-tab="onClickTab">
      <template v-for="(item, index) in tabList" :key="item.value">
        <van-tab :title="item.label" :name="item.value">
          <div class="container">
            <div class="notice">
              <img src="../../../assets/images/user/notice.png" alt="notice">
            </div>
            <div class="title">Oops!</div>
            <div class="info">You don’t have any news yet.</div>
            <div class="info">The list is empty</div>
          </div>
        </van-tab>
      </template>
    </van-tabs>
  </div>
</template>

<script setup name='Records'>
import { reactive, ref, onMounted, defineEmits, defineProps, defineExpose } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import arrow from '@/assets/images/user/arrow.png'
import BTC from '@/assets/images/home/BTC.png'
import { userStore } from '@/store'
// 初始化仓库
const store = userStore()

// 变量区
const router = useRouter()
const route = useRoute()
// tab选中参数
const active = ref(0)
// tab数据
const tabList = ref([
  {
    label: 'Account',
    value: 0
  },
  {
    label: 'Interest-bearing',
    value: 1
  },
  {
    label: 'POS Staking',
    value: 2
  }
])


// 代码区
const onClickLeft = () => {
  history.back()
  store.SET_PATH_DATA('yes')
}
const onClickTab = ({ name }) => {
  active.value = name

}
onMounted(() => {

})

// 将组件中的数据进行暴露出去
defineExpose({

})
</script>

<style lang="scss" scoped>
.records_container {
  position: relative;
  padding: 100px 20px 0px;

  .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 50%;
    padding-top: 50%;

    .notice {
      width: 106px;
      height: 106px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      font-size: 42px;
      color: #000;
      font-weight: 700;
      margin: 30px 0px;
    }

    .info {
      font-size: 25px;
      color: #A4A4A4;
    }
  }

  ::v-deep .van-tab {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #fff;
    margin: 0px 3px;
  }

  ::v-deep .van-tabs__line {
    display: none;
  }

  ::v-deep .van-tabs__nav {
    background: transparent;
  }

  ::v-deep a:focus,
  ::v-deep input:focus,
  ::v-deep button:focus,
  ::v-deep textarea:focus,
  ::v-deep [class*=van-]:focus {
    outline: none;
    background: #d9e5fd !important;
  }
}
</style>